<template>
	<div id="diary">
		<my-header my-title="写日记"></my-header>
		<div class="v-main">
			<div class="main-title">
				<div class="title-item"></div>
				<div class="title-item"></div>
				<div class="title-item"></div>
				<div class="title-item"></div>
			</div>
			<div class="main-content">
				<textarea></textarea>
			</div>
		</div>
		<div class="v-footer">
			
		</div>
	</div>
	
</template>

<script>
</script>

<style lang="scss">
	#diary{
		text-align: left;
		.v-header{
			height:auto;
			background: rgb(86,171,255);			
			color:white;
			font-weight:bold;
			padding:20px;					
			img{
				display: inline-block;
				width:30px;
				height:30px;				
				vertical-align: bottom;
				&:hover{
					cursor: pointer;
				}				
			}
			.v-word{
				display: inline-block;
				font-size:2.6rem;
				text-align: center;
				width:140px;
				height:40px;
				line-height:40px;
				margin-left: calc((100% - 200px)/2);							
			}
			.v-save{
				display: inline-block;
				position: absolute;
				right:0;
				width:60px;
				height:40px;
				line-height:40px;
				font-size:1.8rem;
				&:hover{
					cursor: pointer;
				}
			}
		}
		.v-main{
			
		}
	}
</style>